<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建表格数据</title>
    <style>
      .form-add {
        display: none;
      }
      #j_hideFormAdd {
        cursor: pointer;
      }
      a {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <script>
      window.onload = function () {
        document.getElementById("j_btnAddData").onclick = function () {
          document.getElementById("j_mask").style.display = "block";
          document.getElementById("j_formAdd").style.display = "block";
        };
        document.getElementById("j_hideFormAdd").onclick = function () {
          document.getElementById("j_mask").style.display = "none";
          document.getElementById("j_formAdd").style.display = "none";
        };
        document.getElementById("j_btnAdd").onclick = function () {
          var one = document.getElementById("j_txtLesson");
          var two = document.getElementById("j_txtBelSch");

          var lesson = one.value;
          var belsch = two.value;

          var tr = document.createElement("tr");

          // 1
          var td1=document.createElement('td')
          var td1text = document.createTextNode(lesson);
          td1.appendChild(td1text);
          tr.appendChild(td1);
          // 2
          var td2=document.createElement('td')
          var td2text = document.createTextNode(belsch);
          td2.appendChild(td2text);
          tr.appendChild(td2);
          // 3
          var td3=document.createElement('td');
          var a = document.createElement('a');
          a.className="get";
          var atext = document.createTextNode('Get');
          a.appendChild(atext);
          a.onclick=function(){
            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
          }
          td3.appendChild(a);
          tr.appendChild(td3);


          var tbody = document.getElementById("j_tb");
          tbody.appendChild(tr);

          one.value = '';
          two.value = '';

          document.getElementById("j_mask").style.display = "none";
          document.getElementById("j_formAdd").style.display = "none";
        };

        // TODO 原有get无法删除，新添加的get可以删除，bug待解决

        // 获取全局className=get的元素
        function gclass(className) {
          // var alltags = document.all;
          var allTags = document.getElementsByTagName("*");
          var arr=new Array();
          for(let i =0;i<allTags.length;i++) {
            if(className == allTags[i].className){
              arr[arr.length]=allTags[i];
            }
          }
          return arr;
        }

        var gets = gclass('get');
        for(let i =0; i<gets.length; i++){
          gets[i].onclick=function(){
            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
            console.log(get.length);
          }
        }
      }
    </script>

    <div class="wrap">
      <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd" />
      <table>
        <thead>
          <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
          </tr>
        </thead>
        <tbody id="j_tb">
          <tr>
            <th>Javascript</th>
            <th>创建表格</th>
            <th><a class="get">GET</a></th>
          </tr>
          <tr>
            <th>CSS</th>
            <th>创建表格</th>
            <th><a class="get">GET</a></th>
          </tr>
          <tr>
            <th>HTML</th>
            <th>创建表格</th>
            <th><a class="get">GET</a></th>
          </tr>
          <tr>
            <th>Jquery</th>
            <th>创建表格</th>
            <th><a class="get">GET</a></th>
          </tr>
        </tbody>
      </table>
    </div>

    <div id="j_mask" class="mask"></div>
    <div id="j_formAdd" class="form-add">
      <div class="form-add-title">
        <span>添加数据</span>
        <div id="j_hideFormAdd">x</div>
      </div>
      <div class="form-item">
        <label for="j_txtLesson" class="lb">课程名称:</label>
        <input
          type="text"
          class="txt"
          id="j_txtLesson"
          placeholder="请输入课程名称"
        />
      </div>
      <div class="form-item">
        <label for="j_txtBelSch" class="lb">所属学院:</label>
        <input
          type="text"
          class="txt"
          id="j_txtBelSch"
          placeholder="信息技术学院"
        />
      </div>
      <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd" />
      </div>
    </div>
  </body>
</html>
